<!--
 * @Descripttion: js
 * @Version: 1.0
 * @Author: LeLe
 * @Date: 2022-08-02 10:40:36
 * @LastEditors: LeLe
 * @LastEditTime: 2022-08-02 16:46:13
-->
<template>
  <div id="app">
    <div class="btn-list">
      <button @click="startGame">开始</button>
      <button @click="stopGame">暂停</button>
      <button @click="restGame">重置</button>
    </div>
    <dashed :start="startGame" ref="dashed" />
  </div>
</template>

<script>
import dashed from './components/dashed.vue'

export default {
  name: 'App',
  components: {
    dashed
  },
  data() {
    return {}
  },
  methods: {
    startGame() {
      this.$refs['dashed'].startGame()
    },
    stopGame() {
      this.$refs['dashed'].stopGame()
    },
    restGame() {
      this.$refs['dashed'].restGame()
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.btn-list{
  width: 200px;
  margin: 0 auto;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-around;
}
</style>
